<script lang="ts" setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
// 全局路由
const route = useRoute();

// 导航菜单选项接口
interface NavItem {
  icon: string;
  path: string;
  title: string;
}
// 导航菜单栏数据列表
const items: NavItem[] = [
  {
    icon: 'eli-Edit',
    path: '/joblist',
    title: '职位管理',
  },
  {
    icon: 'eli-Document',
    path: '/publish',
    title: '发布新职位',
  },
];

// 默认激活菜单的 index
const onRoutes = computed(() => {
  return route.path;
});
</script>

<template>
  <div class="sidebar">
    <el-menu
      class="sidebar-el-menu"
      :default-active="onRoutes"
      background-color="#324157"
      text-color="#bfcbd9"
      active-text-color="#20a0ff"
      unique-opened
      router
    >
      <template v-for="item in items" :key="item.path">
        <el-menu-item :index="item.path">
          <el-icon> <component :is="item.icon" /></el-icon>
          <template #title>{{ item.title }}</template>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<style scoped>
.sidebar {
  display: block;
  position: absolute;
  left: 0;
  top: 70px;
  bottom: 0;
  overflow-y: scroll;
}
.sidebar::-webkit-scrollbar {
  width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
  width: 250px;
}
.sidebar > ul {
  height: 100%;
}
</style>
